<template>
  <div class="dataWriteReport item-space">
    <div class="wholeTitle borderBottom flex">
      报告管理：
    </div>
    <div class="content">
      <div class="flex flex-align-center">
        <div class="top flex flex-align-center">
          <div class="tiemText">数据名称：</div>
          <el-input v-model="dataStore.dataName" style="width: 240px" placeholder="请输入数据名称"/>
        </div>
        <button class="btn-baseStyle btn-Primary ml-4" @click="inquire">查询</button>
        <button class="btn-baseStyle btn-Primary ml-4" @click="add">新建</button>
      </div>
      <div class="bottom mt-8 flex ">
        <div class="width100 mr-6 tableUIReset">
          <el-table
              height="500"
              v-loading="dataStore.tableLoading"
              stripe
              :data="dataStore.table.tableData"
              border
              style="width: 100%"
              header-row-class-name="rptableClassNmae"
          >
            <el-table-column prop="index" label="序号" width="90" header-align="center" align="center">
              <template #default="scope">
                {{ scope.$index + 1 + (dataStore.table.page - 1) * dataStore.table.limit }}
              </template>
            </el-table-column>
            <el-table-column v-for="(item,index) in dataStore.table.tableHeader" :prop="item.prop"
                             :label="item.name" header-align="center" align="center" :key="item.prop"/>
            <el-table-column label="操作" align="center" header-align="center">
              <template #default="scope">
                <div class="flex flex-justify-content-center">
                  <div class="tableScopeText pointer mr-2" @click="lookData(scope.row)">查看</div>
                  <div class="tableScopeText pointer mr-2" @click="writeData(scope.row)">填报</div>
                  <div class="tableScopeText pointer" @click="deleteData(scope.row.id)">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationFooter mt-10">
            <el-pagination
                :small="true"
                v-model:current-page="dataStore.table.page"
                v-model:page-size="dataStore.table.limit"
                :page-sizes="[10,20, 30,200, 300, 400]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataStore.table.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>

    </div>
  </div>
  <add-dialog ref="addDialog" @addSuccess="getSuccess"></add-dialog>
  <l-dialog></l-dialog>
  <look-dialog ref="lookDialog"></look-dialog>
  <write-dialog ref="writeDialog" @addSuccess="getSuccess"></write-dialog>
</template>

<script setup lang="ts">
//组件
//接口


//api
import {reactive, ref, h} from 'vue';
import useDataWriteReportStore from "@/store/modules/dataWriteReport/dataWriteReport";
import AddDialog from "@/views/dataWriteReport/compoments/addDialog.vue";
import LookDialog from "@/views/dataWriteReport/compoments/lookDialog.vue";
import {writeReportItemType} from "@/api/datWriteReport/type";
import {ElMessage, ElMessageBox} from 'element-plus'
import WriteDialog from "@/views/dataWriteReport/compoments/writeDialog.vue";

//data
let dataStore = useDataWriteReportStore()
let addDialog = ref()
let lookDialog = ref()
let writeDialog = ref()
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
//查询
const inquire = () => {
  dataStore.table.page = 1
  dataStore.useGetWriteReportList()
}
//新增
const add = () => {
  addDialog.value.init()
}
//pageChange
const handleSizeChange = () => {
  dataStore.useGetWriteReportList()
}
//pageChange
const handleCurrentChange = () => {
  dataStore.useGetWriteReportList()
}
//查看详情
const lookData = (item: writeReportItemType) => {
  // console.log(item)
  lookDialog.value.init(item)
}
//数据填报
const writeData = (item: writeReportItemType) => {
  writeDialog.value.init(item)
}
//删除数据
const deleteData = (id:string) => {
  ElMessageBox({
    title: '提示',
    message: '请确认是否删除该数据!',
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async (action) => {
    try {
      let res = await dataStore.useDeleteData(id)
      ElMessage({
        message:'删除成功',
        type:'success'
      })
      inquire()
    }catch(err){
      ElMessage({
        message:'删除失败err',
        type:'error'
      })
    }
  })
}
//新建成功回调
const getSuccess = () => {
  inquire()
}

dataStore.useGetWriteReportList()

</script>

<style lang="scss">

</style>
